<template>
  <div class="execution">
    <basic-container>
      <div class="info-row">
        
        <div class="info-body">
          <div class="info-header">
            <h4>二级分类信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label>分类名称:</label>
                <span>{{ sortDetails.getSortDto.oneName }}</span>
              </li>
              <li class="info-desc-item">
                <label>App分类图标</label>
                <img
                  :src="sortDetails.getSortDto.oneAppPic"
                  alt=""
                  class="imgIcon"
                />
              </li>
              <li class="info-desc-item">
                <label>小程序分类图标</label>
                <img
                  :src="sortDetails.getSortDto.oneAppletsPic"
                  alt=""
                  class="imgIcon"
                />
              </li>
              <li class="info-desc-item">
                <label>排序:</label>
                <span>{{ sortDetails.getSortDto.oneSort }}</span>
              </li>
              <li class="info-desc-item">
                <label>是否显示:</label>
                <span v-if="sortDetails.getSortDto.oneIsShow === 1">是</span>
                <span v-else>否</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>一级分类信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label>分类名称:</label>
                <span>{{ sortDetails.name }}</span>
              </li>
              <li class="info-desc-item">
                <label>App分类图标</label>
                <img :src="sortDetails.appPic" alt="" class="imgIcon" />
              </li>
              <li class="info-desc-item">
                <label>小程序分类图标</label>
                <img :src="sortDetails.appletsPic" alt="" class="imgIcon" />
              </li>
              <li class="info-desc-item">
                <label>排序:</label>
                <span>{{ sortDetails.sort }}</span>
              </li>
              <li class="info-desc-item">
                <label>是否显示:</label>
                <span v-if="sortDetails.isShow === 1">是</span>
                <span v-else>否</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>分类其他信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label>编辑人:</label>
                <span>{{ sortDetails.edit }}</span>
                <label style="min-width: 10em">审核人</label>
                <span>{{ sortDetails.examineName }}</span>
                <label style="min-width: 10em">状态</label>
                <span v-if="sortDetails.status === 1">审核</span>
                <span v-if="sortDetails.status === 2">已通过</span>
                <span v-if="sortDetails.status === 3">已驳回</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body" v-if="isDetails">
          <div class="info-header">
            <h4>审核信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <el-input
                  style="width: 85%; padding-left: 6%"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-button" v-if="isDetails">
          <el-button type="info" plain @click="handleNo">不通过</el-button>
          <el-button type="primary" plain @click="handleAdopt">通过</el-button>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import "@/styles/index.scss";
import { getSort, examineSort } from "@/api/pms/index";

export default {
  props: {
    isDetails: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sortDetails: {},
      textarea: null,
    };
  },
  created() {
    this.getSortDetails();
  },
  methods: {
    getSortDetails() {
      getSort(this.$route.query.id).then((res) => {
        this.sortDetails = res.data.data;
      });
    },
    handleNo() {
      if (!this.textarea) {
        this.$message.warning("请填写反驳原因！");
        return;
      }
      let params = {
        id: this.sortDetails.id,
        status: 3,
        rejectionReason: this.textarea,
      };
      examineSort(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
      });
    },
    handleAdopt() {
      let params = {
        id: this.sortDetails.id,
        status: 2,
        rejectionReason: this.textarea,
      };
      examineSort(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
      });
    }

  },
};
</script>